<template>
  <div class="login">
    <div class="backdrop">
      <img class="img-scale" src="../../assets/images/backdrop.png" alt="" />
    </div>
    <!-- 登录框 -->
    <div class="register">
      <el-card class="box-card">
        <div class="headline clearfix">广东海川工业物联网</div>
        <el-form
          ref="ApsPlan"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="60px"
        >
          <el-form-item label="用户" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入用户"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="请输入密码"
              clearable
              suffix-icon="el-icon-view"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>

          <!-- 人机验证 -->
          <!-- <div
            class="intercept"
            :class="through ? 'intercept-win' : ''"
            ref="intercept"
            @mousedown="onMove($event)"
          >
            <div
              class="move"
              ref="move"
              :class="through ? 'move-win' : 'move-lose'"
            >
              <i
                :class="through ? 'el-icon-check' : 'el-icon-d-arrow-right'"
              ></i>
            </div>
            <div
              class="plan"
              :class="through ? 'plan-win' : 'plan-lose'"
              ref="when"
            ></div>
            <div class="slide" :class="through ? 'slide-win' : 'slide-lose'">
              {{ sliding }}
            </div>
          </div>
         
          <div class="plan-box" ref="plan" v-show="hidden">
            <div class="verify-img">
              <img
                class="img-scale"
                src="../../assets/images/cheshi.jpg"
                alt=""
              />
            </div>
            <div class="block" ref="block"></div>
            碎片 -->
          <!-- <div class="debris" ref="debris">
              <div class="debris-img" ref="debrisImg">
                <img
                  class="img-scale"
                  src="../../assets/images/cheshi.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>  -->

          <div class="bnt">
            <el-button
              class="enter"
              :disabled="whether"
              type="primary"
              @click="Register('ApsPlan')"
              round
              >登录</el-button
            >
          </div>
        </el-form>
      </el-card>
    </div>
    <div class="clearfix company-logo">
      <div class="logo fl">
        <img class="img-scale" src="../../assets/images/logo.png" alt="" />
      </div>
      <div class="company fl">广东海川工业物联网</div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Login',
  data() {
    return {
      formData: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入用户",
            trigger: "blur",
          },
          // {
          //   pattern: /^[a-zA-Z0-9_-]{4,16}$/,
          //   message: "请输入正确用户格式",
          //   trigger: "blur",
          // },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          // {
          //   pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/,
          //   message: "你输入的密码不正确",
          //   trigger: "blur",
          // },
        ],
      },
      // 判断验证是否成功
      through: false,
      hidden: false,
      max: 0,
      // 标签
      intercept: null,
      move: null,
      plan: null,
      block: null,
      debrisImg: null,
      debris: null,
      when: null,
      // 随机小白块最大最小值
      verifyImg: {
        Xmax: 0,
        Xmin: 0,
        Ymax: 0,
        Ymin: 0,
      },

      blockX: 0,
      blockY: 0,
      schedule: 0,
      whether: false,
      sliding: "滑动验证",
    };
  },
  // 加载后
  mounted() {
    // this.label();
  },
  methods: {
    // label() {
    //   // 获取标签
    //   this.intercept = this.$refs.intercept;
    //   this.move = this.$refs.move;
    //   this.plan = this.$refs.plan;
    //   this.block = this.$refs.block;
    //   this.debrisImg = this.$refs.debrisImg;
    //   this.debris = this.$refs.debris;
    //   this.when = this.$refs.when;
    // },
    // // 登录验证
    // onMove(e) {
    //   this.sliding = "滑动验证";
    //   this.hidden = true;
    //   this.move.style.transition = "";
    //   this.when.style.transition = "";
    //   this.debris.style.transition = "";
    //   // 获取最大值
    //   this.max = this.intercept.offsetWidth - this.move.offsetWidth;
    //   let moceX = e.screenX;
    //   document.onmousemove = (e) => {
    //     if (this.verifyImg.Xmax == 0) {
    //       // 设置最大和最小值
    //       this.verifyImg.Xmax = this.plan.offsetWidth - this.block.offsetWidth;
    //       this.verifyImg.Xmin = this.plan.offsetWidth / 2;
    //       this.verifyImg.Ymax =
    //         this.plan.offsetHeight - this.block.offsetHeight;
    //       console.log("获取的值===>", this.verifyImg);
    //       // 设置白色小方块随机出现的位置
    //       this.blockX = this.random(this.verifyImg.Xmin, this.verifyImg.Xmax);
    //       this.blockY = this.random(this.verifyImg.Ymin, this.verifyImg.Ymax);
    //       this.block.style.top = this.blockY + "px";
    //       this.block.style.left = this.blockX + "px";
    //       // 设置图片位置
    //       this.debrisImg.style.top = -this.blockY + "px";
    //       this.debrisImg.style.left = -this.blockX + "px";
    //       // 设置碎片的位置
    //       this.debris.style.top = this.blockY + "px";
    //     }
    //     this.schedule = e.screenX - moceX;
    //     if (this.schedule <= 0) {
    //       this.schedule = 0;
    //     } else if (this.schedule >= this.max) {
    //       this.schedule = this.max;
    //     }
    //     // 移动的碎片
    //     this.move.style.left = this.schedule + "px";
    //     this.debris.style.left = this.schedule + "px";
    //     this.when.style.width = this.schedule + "px";
    //   };
    //   // 监控全局鼠标弹起来的事件
    //   document.addEventListener("mouseup", () => {
    //     // 误差在5px和-5px验证成功结果
    //     if (
    //       this.blockX - this.schedule <= 5 &&
    //       this.blockX - this.schedule >= -5
    //     ) {
    //       console.log("验证成功");
    //       // 验证成功显示位置
    //       this.move.style.transition = "left 0.25s linear ";
    //       this.when.style.transition = "width 0.25s linear";
    //       this.move.style.left = this.max + "px";
    //       this.when.style.width = this.max + "px";
    //       //  验证成功的需要显示样式
    //       this.through = true;
    //       this.hidden = false;
    //       this.whether = false;
    //       this.sliding = "验证成功";
    //       document.onmousemove = null;
    //       document.onmouseup = null;

    //       return;
    //     } else {
    //       console.log("验证失败");
    //       // 验证失败效果
    //       this.verifyImg = {
    //         Xmax: 0,
    //         Xmin: 0,
    //         Ymax: 0,
    //         Ymin: 0,
    //       };
    //       //  验证失败的需要显示样式
    //       this.through = false;
    //       this.hidden = false;
    //       this.whether = true;
    //       this.sliding = "验证失败";
    //       this.move.style.transition = "left 0.25s linear ";
    //       this.when.style.transition = "width 0.25s linear";
    //       this.debris.style.transition = "left 0.25s linear ";
    //       this.move.style.left = 0 + "px";
    //       this.debris.style.left = 0 + "px";
    //       this.when.style.width = 0 + "px";
    //       document.onmousemove = null;
    //       document.onmouseup = null;
    //     }
    //   });
    // },
    // // 随机数
    // random(min, max) {
    //   return Math.floor(Math.random() * (max - min)) + min;
    // },
    // 登录跳转
    Register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: "post",
            url: "/checklogin",
            data: this.formData,
          })
            .then((res) => {
              console.log("登录完成", res);
              if (res.data.meta.status == 200) {
                this.$message.success("登录成功");
                
                localStorage.setItem("token", res.data.data.token);
                this.$router.push({ name: "Home" });
               
              } else {
                this.$message.error("账号或者密码错误");
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("请重新填写用户和密码");
          return;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 引入样式
@import "../../assets/css/login.less";
</style>
